<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <title>Summary</title>
    <link rel="stylesheet" type="text/css" href="css/layout-default-latest.css" />
    <link rel="stylesheet" type="text/css" href="css/start/jquery-ui-1.9.0.custom.min.css" />
    <script type="text/javascript" src="js/jquery-1.8.2.min.js"></script>
    <script type="text/javascript" src="js/jquery-ui-1.9.0.custom.min.js"></script>
    <script type="text/javascript">
        //utility
        function include(arr, obj) {
            for(var i=0; i<arr.length; i++) {
                if (arr[i] == obj) return true;
            }
        }


        $(document).ready(function ()
        {

        });


        function getImage(color)
        {
            return "<img src='images/icons/" + color + "' style='float: left' />";
        }

        function refresh()
        {
            var plant = parent.getPlantFromChild().split(":");
            $('#selectedPlants').html(plant[1]);
            displayValues();
        }

        function displayValues()
        {
            var kpis = parent.getSelectedKPIsFromChild();


            $.ajax({
                type: "GET",
                url: "data/exec_summery.xml",
                dataType: "xml",
                success: function(xml) {
                    $('#summary').html($('#summary thead'));
                    $(xml).find('measure').each(function(){
                        /*
                         <measure id="F-01" name="Maintenance%20Cost%20Index">
                         <url value="f01_mci_2010.htm?curr_plant="/>
                         <plant value="0.07 " color="red25.png"/>
                         <adminArea value="0.07 " color="red25.png"/>
                         <aramco value="0.07 " color="red25.png"/>
                         <bLine value="0.07 " color="red25.png"/>
                         </measure>
                         */

                        var code = $(this).attr('id');
                        if(!include(kpis, code))
                            return;

                        var kpi = decodeURIComponent($(this).attr('name'));
                        var url = $(this).find('url').attr('value');
                        var division = $(this).find('plant').attr('value');
                        var division_color = $(this).find('plant').attr('color');
                        var plant = $(this).find('plant').attr('value');
                        var plant_color = $(this).find('plant').attr('color');
                        var admin_area = $(this).find('adminArea').attr('value');
                        var admin_area_color = $(this).find('adminArea').attr('color');
                        var business_line = $(this).find('bLine').attr('value');
                        var business_line_color = $(this).find('bLine').attr('color');
                        var aramco = $(this).find('aramco').attr('value');
                        var aramco_color = $(this).find('aramco').attr('color');

                        $('<tr style="text-align: right"></tr>').html(
                                '<th style="text-align: left" code="' + code + '" url="' + url + '"><a href="#">'+kpi+'</a></th>' +
                                        '<td style="width: 45px;">'+division+'</td>' +
                                        '<td style="width: 45px;">'+getImage(division_color)+'</td>' +
                                        '<td style="width: 45px;">'+plant+'</td>' +
                                        '<td style="width: 45px;">'+getImage(plant_color)+'</td>' +
                                        '<td style="width: 45px;">'+admin_area+'</td>' +
                                        '<td style="width: 45px;">'+getImage(admin_area_color)+'</td>' +
                                        '<td style="width: 45px;">'+business_line+'</td>' +
                                        '<td style="width: 45px;">'+getImage(business_line_color)+'</td>' +
                                        '<td style="width: 45px;">'+aramco+'</td>' +
                                        '<td style="width: 45px;">'+getImage(aramco_color)+'</td>').appendTo('#summary');
                    });



                    $('tr th a').click(function ()
                    {
                        addKPI($(this).parent().attr('code'), $(this).html(), $(this).parent().attr('url'));
                    });

                }
            });
        }

        function addKPI(code, title, url)
        {
            window.top.addKPIFromChild(code, title, url);
        }

    </script>
    <style type="text/css">
        .my-table {
            font-size: 12px;
            font-style: normal;
            font-weight: normal;
            letter-spacing: -1px;
            line-height: .8em;
            border-collapse:collapse;
            text-align:center;
            border: 1px solid black;
        }

        .my-table thead tr {
            padding:40px 10px 40px 10px;
            height: 50px;
            color:#fff;
            font-size: 16px;
            font-weight:normal;

            border-top:3px solid #666;
        }
        .my-table tbody tr:hover {
            background-color: #ccc
        }
        .my-table tbody tr {
            font-size: 14px;
            font-weight:normal;


        }
        .my-table td, .my-table th {
            padding:3px;

            *border-right:1px solid #666;
        }
    </style>
</head>
<body>
    <div style="margin-top: 10px; padding: 0 .7em;" class="ui-state-highlight ui-corner-all">
        <p><span style="float: left; margin-right: .3em;" class="ui-icon ui-icon-info"></span>
            <strong>Selected Plant:</strong> <span id="selectedPlants"> Bla bla bla bla </span></p>
    </div>
    <br />
    <table class="ui-widget-content my-table" style="width: 100%" id="summary">
        <thead>
        <tr class="ui-widget-header">
            <th>KPI</th>
            <th colspan="2">Division</th>
            <th colspan="2">Plant</th>
            <th colspan="2">Admin Area</th>
            <th colspan="2">Business Line</th>
            <th colspan="2">Aramco</th>
        </tr>
        </thead>
    </table>
</body>
</html>